<template>
  <div class="game-step">
    <el-row justify="space-around">
      <el-col :span="10">
        <h3 class="game-item">主场球队比赛数据</h3>
        <div class="game-item">
          <el-timeline class="game-height mt30" v-if="homeDataList.length > 0">
            <el-timeline-item
              v-for="up in homeDataList"
              :timestamp="up.eventTime"
              placement="top"
              :hollow="true"
            >
              <el-card style="width: 200px">
                <div class="game-item-content">
                  <p class="mr10">{{ up.playerNumber }}</p>
                  <p>{{ up.idName }}</p>
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="RaceEventTypeInfo[up.eventType].text"
                    placement="bottom"
                  >
                    <img
                      :src="RaceEventTypeInfo[up.eventType].icon"
                      class="game-item-img ml10"
                    />
                  </el-tooltip>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
          <el-empty v-else description="暂无数据" />
        </div>
      </el-col>
      <el-col :span="10">
        <h3 class="game-item">客场球队比赛数据</h3>
        <div class="game-item">
          <el-timeline class="game-height mt30" v-if="awayDataList.length > 0">
            <el-timeline-item
              v-for="up in awayDataList"
              :timestamp="up.eventTime"
              placement="top"
              :hollow="true"
            >
              <el-card style="width: 200px">
                <div class="game-item-content">
                  <p class="mr10">{{ up.playerNumber }}</p>
                  <p>{{ up.idName }}</p>
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="RaceEventTypeInfo[up.eventType].text"
                    placement="bottom"
                  >
                    <img
                      :src="RaceEventTypeInfo[up.eventType].icon"
                      class="game-item-img ml10"
                    />
                  </el-tooltip>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
          <el-empty v-else description="暂无数据" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { RaceEventTypeInfo } from "../../../config/courseMock";
const props = defineProps<{
  homeDataList?: any;
  awayDataList?: any;
}>();
</script>

<style lang="scss" scoped>
.game-step {
  .game-height {
    height: 300px;
    overflow: auto;
  }

  .game-item {
    display: flex;
    justify-content: center;

    &-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 20px;
    }

    &-time {
      width: 86px;
    }

    &-img {
      width: 20px;
      height: 20px;
    }
  }
}
</style>
